上一篇我們提到雖然以前就接觸過前端，但隨著時間久沒碰，便漸漸淡忘......
與其沉浸在「學了又忘，到底算會不會」的恐慌，不如著手開始扎實基礎，熟練操作。
從設計到程式的第一步往往是不容易的，設計像是是Figma還是建模軟體，大多是運用滑鼠，而程式則更多是使用鍵盤。

外掛安裝

首先我們需要面對的是「工具的轉換」。要開始撰寫程式前，我們需要有一個好的環境，從設計到前端，從Figma到VS Code。
以下是我搜尋到的幾款「外掛」，是輔助撰寫程式的好幫手!

1.Live Server

• 以前寫前端在改完程式碼後，要一直按重新整理(F5)。裝了這個外掛後，只需要按右下角的「Go Live」， 網頁就會即時同步我對於程式碼的修改，對於習慣視覺性的設計師來說是相對熟悉的操作方法。

2.Prettier - Code formatter

• 排版混亂不整齊是許多程式新手的的痛點。這個外掛會在檔案儲存的時候，自動幫忙縮排，把程式碼整 理得乾乾淨淨。

3.Auto Rename Tag / Auto Close Tag

• 在寫HTML最怕標頭Tag漏掉結尾，或是改了前面的忘記改後面的。這兩個外掛會自動幫忙補齊結尾標籤， 像是</div> 或 </p> 等，或是同步修改前後標籤，減少許多低級的語法錯誤。

4.One Dark Pro(或是自己喜歡的佈景主題)

• 視覺是影響人類很重要的一個部分，身為設計系畢業，介面好看也很重要。把VS Code改成自己喜歡的深色或淺 色主題，寫起程式來才會更有動力。

快捷鍵

之前操作各種設計軟體時習慣的是左手操作鍵盤，右手操作滑鼠，而不論是設計還是程式，快捷鍵都是我們的好朋友。
1.Figma

• 複製整行 : Ctrl + D
• 全域搜尋 : Ctrl + F
• 多重選取 : 按住 Shift 點選多個圖層
• 註解說明 : 隱藏圖層

2.VS Code

• 複製整行 : Shift + Alt + 下方向鍵
• 全域搜尋 : Ctrl + P (找檔案) / Ctrl+ F (找文字)
• 多重選取 : 按住 Alt + 滑鼠點擊多處
• 註解說明 : Ctrl + /

GitHub

每當接觸前端或是其他程式，就很常會聽到GitHub，那GitHub是甚麼呢?他的功能又是甚麼?為甚麼前端會需要用到它呢?

• Git(版本控制系統):就像是設計軟體裡的「歷史版本紀錄」。當網頁寫到一半，可以隨時存檔成一個個的版本，如果後悔了，可以隨時「Ctrl+Z」退回到上一個狀態。

• GitHub(雲端平台):它把你的 Git 版本紀錄備份到雲端上，讓你可以跨電腦工作，甚至讓全世界的人看見你的程式碼。

可以直接將我的HTML/CSS/JS 檔案上傳到 GitHub，開啟免費的 GitHub Pages 功能，就會得到一個專屬網址。那別人點進去就能直接看到我的網頁，很適合用來展示作品。

今日總結

要從設計到程式是個不簡單的過程，除了操作的軟體不同、工具不同，甚至快捷鍵甚麼也不同。除了撰寫不同類型的程式，還要學會整理與管理，並且更好的輸出。萬事起頭難，現在有了這些外掛的輔助以及快捷鍵，已經架好了一個好的撰寫環境，是朝撰寫程式跨出了一大步!